<template>
  <a-card :bordered="false">
    <component @onEdit="handleEdit" @onGoBack="handleGoBack" :customerId="customerId" :is="currentComponet"/>
  </a-card>
</template>

<script>
    // 动态切换组件
    import List from '@/perm/views/qywx/khgl/KhglList'
    import Edit from '@/perm/views/qywx/khgl/KhglEdit'

    export default {
        name: 'KhglPage',
        components: {
            List,
            Edit
        },
        data () {
            return {
                currentComponet: 'List',
                customerId: ''
            }
        },
        mounted () {
            const type = this.$route.query.type
            const fromGroupUserId = this.$route.query.fromGroupUserId
            if (type !== 'detail') {
                this.record = ''
                this.currentComponet = 'List'
            }
            if (type === 'detail' && fromGroupUserId) {
                this.customerId = fromGroupUserId
                this.currentComponet = 'Edit'
            }
        },
        methods: {
            handleEdit (customerId) {
                this.customerId = customerId
                this.currentComponet = 'Edit'
                this.$router.push({
                    path: '/qywx/khgl/page?type=detail'
                })
            },
            handleGoBack () {
                this.customerId = ''
                this.currentComponet = 'List'
            }
        },
        watch: {
            '$route' () {
                const type = this.$route.query.type
                if (type !== 'detail') {
                    this.record = ''
                    this.currentComponet = 'List'
                }
            }
        }
    }
</script>
